<template>
  <div class="m-content-box">
    <div id="J_DataTable" class="normal-content">
      <div class="tm-tips">提示：模版消息发送频繁公众号有封号风险，请谨慎设置</div>
      <!-- 配置列表 -->
      <div id="tmSetting" class="field-table">
        <!-- 团课业务提醒 -->
        <div class="league mb-30">
          <h3 class="field-table__title">短信业务提醒</h3>
          <el-checkbox-group v-model="checkList" @change="checks">
            <div v-for="(item, index) in datalist" :key="index" class="field-table__row">
              <div class="field-table__cell">
                <label class="field-table__cell-label">
                  <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
                </label>
                <div class="field-table__cell-val"><span class="check-tm-tpl" @click="addtocarts($event,tag)">查看消息模板</span></div>
              </div>
            </div>
          </el-checkbox-group>
        </div>
        <!-- /团课业务提醒 -->
      <!-- /配置列表 -->
      </div>
      <!-- 模板消息模板 -->
      <div v-if="isshow" id="tmTpl" class="tm-tpl-box js-dialog" :style="'left:'+left+ 'px; top:'+top+'px;'">
        <span class="close" @click="close">
          <img loading="lazy" src="../../../public/img/svg-close.svg" alt="">
        </span>
        <div class="content clear">
          <div class="avatar">
            <img loading="lazy" src="../../../public/img/svg-eg.svg" alt="">
          </div>
          <div id="tmTplText" class="tpl">消费成功通知<br>消费场馆：&lt;消费场馆&gt;<br>消费金额：&lt;消费金额&gt;<br>消费时间：&lt;消费时间&gt;<br>卡内余额：&lt;卡内余额&gt;</div>
        </div>
      </div>
    <!-- 模板消息模板 -->
    </div>
  </div></template>

<script>

import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination
import { SchedTmpl, SchedTmplChoice } from '@/api/brand'
import { cardStoredList } from '@/api/member'
export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      radio: '1',
      isshow: false,
      top: 0,
      left: 0,
      checkList: [],
      datalist: []
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '微信模板消息设置',
      url: '/system/appointmentSettings',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getdata()
  },
  methods: {
    checks(e) {
      var params = {
        idlist: e.join(',')
      }
      SchedTmplChoice(params).then(response => {
        const {
          data
        } = response
        console.log(data)
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    getdata() {
      SchedTmpl({}).then(response => {
        const {
          data
        } = response
        this.datalist = data.tmpl_list
        this.checkList = data.tmpl_choice
        console.log(data)
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    close() {
      this.isshow = false
    },
    addtocarts(e, tag) {
      // 让我们小球显示出来
      this.isshow = true
      // 获取点击元素
      const rect = e.target.getBoundingClientRect()// 获取点击的dom的位置
      console.log(rect)
      this.top = rect.top + 30
      this.left = rect.left - 300
    }
  }
}
</script>

<style scoped>
  .m-content-box {
    position: relative;
    padding: 30px 63px;
    font-size: 14px;
  }
  .normal-content {
    position: relative;
    width: 840px;
    margin: 0 auto;
  }
  .tm-tips {
    margin-bottom: 25px;
    color: #f49352;
    font-size: 12px;
  }
  .field-table {
    position: relative;
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .field-table__title {
    height: 22px;
    font-size: 12px;
    color: #787878;
  }
  .field-table__row {
    display: flex;
    margin-bottom: 2px;
    min-height: 42px;
    background: #f2f2f2;
  }
  .field-table__cell {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f2f2f2;
    padding: 5px 15px;
    box-sizing: border-box;
  }
  .field-table__cell-label {
    padding-right: 10px;
  }
  .field-table__cell-val {
    flex: 1;
    text-align: right;
  }
  .check-tm-tpl {
    color: #41c3a8;
    cursor: pointer;
  }
  .tm-tpl-box {
    position: fixed;
    top: 200px;
    left: 600px;
    width: 400px;
    padding: 50px 30px;
    background: #ffffff;
    box-shadow: 0 0 24px 0 #ebedef;
    box-sizing: border-box;
  }
  .tm-tpl-box .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  .clear {
    zoom: 1;
  }
  .tm-tpl-box .content .avatar {
    float: left;
  }
  .tm-tpl-box .content .tpl {
    width: 270px;
    float: right;
  }
  img {
    max-width: 100%;
  }

  img {
    border: 0;
  }
  img {
    overflow-clip-margin: content-box;
    overflow: clip;
  }
</style>
